<template>
  <div>
    <select :value="value" @change="change">
    <!-- 我们这里不能使用v-model，因为v-model会修改父组件传递进来的数据 -->
    <!-- <select v-model="city"> -->
    <!-- <select :value="city" @change="city = $event.target.value"> -->
      <!-- 两个标签中间的内容是给用户看的。 尖括号里面的value属性，选中以后是发送给后端 -->
      <option value="100">广州</option>
      <option value="101">上海</option>
      <option value="102">北京</option>
      <option value="103">武汉</option>
    </select>
  </div>
</template>

<script>
export default {
  props: {
    // city: String
    value: String
  },
  data() {
    return {
      // 我们这个组件只是一个功能性组件，显示什么城市，取决于父组件传递进来的值
      // city: '101'
    }
  },
  methods:{
    change(e){
      // this.$emit('select_change_event', e.target.value)
      this.$emit('input', e.target.value)
    }
  }
}
</script>